<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.总结Vue数据监测</title>
   
</head>
  <!--引入开发版本Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
<body>

    <!--  劫持
         Vue监视数据的原理:
               1. vue会监视data中所有层次的数据.

               2. 如何监测对象中的数据?
                  通过setter实现监视,且要在new Vue时就要传入要检测的数据.
                     (1). 对象中后追加的属性,Vue默认不做响应式处理
                     (2). 如需给后添加的属性做响应式,请使用如下API:
                                Vue.set(target,propertyName/index,value) 或
                                vm.$set(target,propertyName/index,value)
               
               3.如何监测数组中的数据?
                    通过包裹数组更新元素的方法实现,本质就是做了两件事:
                      (1). 调用原生对应的方法对数组进行更新.
                      (2). 重新解析模板,进而更新页面。
               
               4.在Vue修改数组中的某个元素一定要如下方法:
                     1. 使用这些API:push(),pop(),shift(),unshift(),splice(),sort(),reverse()
                     2. Vue.set() 或 vm.$set()  
               
               特别注意:Vue.set() 和 vm.$set() 不能给vm 或 vm的(data)根数据对象 添加属性！！！   
                     
     -->
    
    <!-- 准备好一个容器 -->
    <div id="root">

      <h1>学生信息</h1>
      <button v-on:click="student.age++">年龄+1岁</button><br />
      <button @click="addSex">添加一个性别,默认值是男</button> <br />
      <button  v-on:click="student.sex = '未知'">修改性别</button> <br />
      <button  v-on:click="addFriend">添加一个朋友</button> <br />
      <button  v-on:click="updateFristFriendName">在列表首位添加一个名字</button> <br />
      <button  v-on:click="addAiHao">添加一个爱好</button> <br />
      <button  v-on:click="updateAiHao">修改第一个爱好为开车</button> <br />

      <button  v-on:click="removeSmoke">过滤掉爱好中的抽烟</button> <br />

      <h2>学生姓名:{{student.name}}</h2>
      <h2>学生年龄:{{student.age}}</h2>
      <h2 v-if="student.sex">学生性别: {{student.sex}}</h2>
      <hr />

      <h2>学生年龄: 真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
 
      <h2>爱好</h2>
        <ul>
           <li v-for="(f,index) in student.hobby" :key="index"> 
            {{f}}
           </li>
        </ul>
      <h2>朋友们</h2>
        <ul>
           <li v-for="(f,index) in student.friends" :key="index"> 
            {{f.name}}-{{f.age}}
           </li>
        </ul>

    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    
    //用computed实现
  const vm =  new Vue({
        el:document.getElementById('root'),
        data:{
            name:"尚硅谷",
            address:"北京",
            student:{
               name:'tom',
               age:18,
               sex:'男',
               hobby:['抽烟','喝酒','烫头'],
               friends:[
                {name:'jerry',age:35},
                {name:'tony',age:36}
               ]
            }
         },
         //放入方法
         methods:{
            addSex(){
              //Vue.set(this.student,'sex','男')
              this.$set(this.student,'sex','男')
            },
            addFriend(){
               this.student.friends.unshift({name:'jack',age:70})
            },
            updateFristFriendName(){
               this.student.friends[0].name='改了'
            },
            addAiHao(){
               this.student.hobby.unshift('篮球')
            },
            //修改第一个爱好
            updateAiHao(){
               //this.student.hobby.splice(0,1,'开车')
              // Vue.set(this.student.hobby,0,'开车')
               Vue.$set(this.student.hobby,0,'开车')
            },
            //过滤掉爱好中的抽烟
            removeSmoke(){
              return this.student.hobby = this.student.hobby.filter((h)=>{
                  return h !=='抽烟'
               })
            }
            
         }
    })

   console.log(vm);

</script>

</html>